/**
 * 排行榜页面组件
 * 显示用户在语言学习应用中的排名和积分情况
 * 包含颁奖台展示、完整排行榜列表和个人排名信息
 * 提供激励性的竞争体验，促进用户持续学习
 */
import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  Dimensions
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';

const { width } = Dimensions.get('window');

// 模拟排行榜数据 - 在真实应用中，这些数据应该来自后端服务器
// 包含用户ID、姓名、经验值、头像、国旗和排名信息
const mockLeaderboardData = [
  { id: 1, name: '小雅', xp: 2450, avatar: '👩', flag: '🇨🇳', rank: 1 },
  { id: 2, name: '大卫', xp: 2280, avatar: '👨', flag: '🇺🇸', rank: 2 },
  { id: 3, name: '玛丽亚', xp: 2150, avatar: '👩', flag: '🇪🇸', rank: 3 },
  { id: 4, name: '你', xp: 0, avatar: '😊', flag: '🇨🇳', rank: 4 },
  { id: 5, name: '约翰', xp: 1890, avatar: '👨', flag: '🇨🇦', rank: 5 },
  { id: 6, name: '苏菲', xp: 1750, avatar: '👩', flag: '🇫🇷', rank: 6 },
  { id: 7, name: '艾哈迈德', xp: 1620, avatar: '👨', flag: '🇦🇪', rank: 7 },
  { id: 8, name: '丽莎', xp: 1450, avatar: '👩', flag: '🇩🇪', rank: 8 },
  { id: 9, name: '卡洛斯', xp: 1320, avatar: '👨', flag: '🇲🇽', rank: 9 },
  { id: 10, name: '艾玛', xp: 1180, avatar: '👩', flag: '🇦🇺', rank: 10 },
];

/**
 * 排行榜页面主组件
 * 管理排行榜数据的显示和更新，处理用户交互
 * @param {Object} navigation - React Navigation 导航对象，用于页面间跳转
 */
export default function LeaderboardScreen({ navigation }) {
  // 排行榜数据状态，包含所有用户的排名和积分信息
  const [leaderboardData, setLeaderboardData] = useState(mockLeaderboardData);
  // 当前用户的排名，用于突出显示
  const [userRank, setUserRank] = useState(4);

  // 组件加载时的副作用处理
  useEffect(() => {
    // 在真实应用中，这里会从服务器获取用户的实际经验值并更新排行榜
    // 目前使用模拟数据进行演示
    
    // 添加焦点监听器，当页面获得焦点时刷新数据
    const unsubscribe = navigation.addListener('focus', () => {
      // loadLeaderboardData(); // 未来可以在这里加载真实数据
    });

    // 组件卸载时清理监听器，防止内存泄漏
    return unsubscribe;
  }, [navigation]);

  /**
   * 渲染排行榜单个用户项目
   * 展示每个用户的排名、头像、姓名和经验值
   * @param {Object} item - 包含用户信息的对象
   * @param {number} item.id - 用户唯一标识符
   * @param {string} item.name - 用户姓名
   * @param {number} item.xp - 用户经验值
   * @param {string} item.avatar - 用户头像Emoji
   * @param {string} item.flag - 国旗Emoji
   * @param {number} item.rank - 用户排名
   * @returns {JSX.Element} 渲染后的用户项目组件
   */
  const renderLeaderboardItem = (item) => {
    // 判断是否为当前用户，用于特殊显示
    const isCurrentUser = item.name === '你';
    
    // 颁奖台颜色配置：金银铜三种颜色
    const podiumColors = {
      1: '#FFD700', // 金色 - 第一名
      2: '#C0C0C0', // 银色 - 第二名
      3: '#CD7F32', // 铜色 - 第三名
    };

    return (
      <View
        key={item.id}
        style={[
          styles.leaderboardItem,
          isCurrentUser && styles.currentUserItem,
          item.rank <= 3 && styles.podiumItem
        ]}
      >
        {/* 排名显示区域 */}
        <View style={[
          styles.rankContainer,
          // 前三名使用特殊的颁奖台颜色
          item.rank <= 3 && { backgroundColor: podiumColors[item.rank] }
        ]}>
          <Text style={[
            styles.rankText,
            // 前三名排名数字使用白色文字
            item.rank <= 3 && styles.podiumRankText
          ]}>
            {item.rank}
          </Text>
        </View>

        {/* 用户头像和国旗显示区域 */}
        <View style={styles.avatarContainer}>
          <Text style={styles.avatar}>{item.avatar}</Text>
          <Text style={styles.flag}>{item.flag}</Text>
        </View>

        {/* 用户姓名和经验值显示区域 */}
        <View style={styles.nameContainer}>
          <Text style={[
            styles.name,
            // 当前用户使用特殊颜色显示
            isCurrentUser && styles.currentUserName
          ]}>
            {item.name}
          </Text>
          <Text style={styles.xpText}>{item.xp.toLocaleString()} 经验值</Text>
        </View>

        {/* 前三名显示奖杯图标 */}
        {item.rank <= 3 && (
          <View style={styles.trophyContainer}>
            <Ionicons
              name="trophy"
              size={20}
              color={podiumColors[item.rank]}
            />
          </View>
        )}
      </View>
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      {/* 页面头部 - 显示排行榜标题和竞赛信息 */}
      <View style={styles.header}>
        <Text style={styles.headerTitle}>排行榜</Text>
        <Text style={styles.headerSubtitle}>周度竞赛</Text>
      </View>

      {/* 颁奖台展示区域 - 突出显示前三名用户 */}
      <View style={styles.podiumSection}>
        <View style={styles.podiumContainer}>
          {/* 第二名显示 */}
          {leaderboardData[1] && (
            <View style={[styles.podiumPlace, styles.secondPlace]}>
              {/* 第二名用户头像 */}
              <View style={styles.podiumAvatar}>
                <Text style={styles.podiumAvatarText}>{leaderboardData[1].avatar}</Text>
              </View>
              {/* 第二名排名数字 */}
              <View style={styles.podiumRank}>
                <Text style={styles.podiumRankNumber}>2</Text>
              </View>
              {/* 第二名用户姓名和经验值 */}
              <Text style={styles.podiumName}>{leaderboardData[1].name}</Text>
              <Text style={styles.podiumXP}>{leaderboardData[1].xp.toLocaleString()} 经验值</Text>
            </View>
          )}

          {/* 第一名显示（中间位置，最高） */}
          {leaderboardData[0] && (
            <View style={[styles.podiumPlace, styles.firstPlace]}>
              {/* 冠军皇冠图标 */}
              <View style={styles.crownContainer}>
                <Text style={styles.crown}>👑</Text>
              </View>
              {/* 第一名用户头像 */}
              <View style={styles.podiumAvatar}>
                <Text style={styles.podiumAvatarText}>{leaderboardData[0].avatar}</Text>
              </View>
              {/* 第一名排名数字 */}
              <View style={styles.podiumRank}>
                <Text style={styles.podiumRankNumber}>1</Text>
              </View>
              {/* 第一名用户姓名和经验值 */}
              <Text style={styles.podiumName}>{leaderboardData[0].name}</Text>
              <Text style={styles.podiumXP}>{leaderboardData[0].xp.toLocaleString()} 经验值</Text>
            </View>
          )}

          {/* 第三名显示 */}
          {leaderboardData[2] && (
            <View style={[styles.podiumPlace, styles.thirdPlace]}>
              {/* 第三名用户头像 */}
              <View style={styles.podiumAvatar}>
                <Text style={styles.podiumAvatarText}>{leaderboardData[2].avatar}</Text>
              </View>
              {/* 第三名排名数字 */}
              <View style={styles.podiumRank}>
                <Text style={styles.podiumRankNumber}>3</Text>
              </View>
              {/* 第三名用户姓名和经验值 */}
              <Text style={styles.podiumName}>{leaderboardData[2].name}</Text>
              <Text style={styles.podiumXP}>{leaderboardData[2].xp.toLocaleString()} 经验值</Text>
            </View>
          )}
        </View>
      </View>

      {/* 完整排行榜列表 - 显示所有参与者的排名 */}
      <ScrollView style={styles.leaderboardContainer} showsVerticalScrollIndicator={false}>
        <Text style={styles.sectionTitle}>所有参与者</Text>
        
        {/* 遍历并渲染每个用户的排行榜项目 */}
        {leaderboardData.map(renderLeaderboardItem)}

        {/* 底部信息区域 - 鼓励性文字和排名规则说明 */}
        <View style={styles.bottomInfo}>
          <Text style={styles.infoText}>
            🔥 继续学习，提升排名！
          </Text>
          <Text style={styles.infoSubtext}>
            排名每周一重置
          </Text>
        </View>

        {/* 底部内边距，保证内容不被底部导航栏遮挡 */}
        <View style={styles.bottomPadding} />
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    backgroundColor: '#58CC02',
    padding: 20,
    alignItems: 'center',
    borderBottomLeftRadius: 25,
    borderBottomRightRadius: 25,
  },
  headerTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 5,
  },
  headerSubtitle: {
    fontSize: 16,
    color: '#fff',
    opacity: 0.9,
  },
  podiumSection: {
    backgroundColor: '#fff',
    paddingVertical: 30,
    marginHorizontal: 20,
    marginTop: 20,
    borderRadius: 20,
    elevation: 5,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
  podiumContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'flex-end',
    paddingHorizontal: 20,
  },
  podiumPlace: {
    alignItems: 'center',
    marginHorizontal: 10,
  },
  firstPlace: {
    marginBottom: 0,
  },
  secondPlace: {
    marginBottom: 20,
  },
  thirdPlace: {
    marginBottom: 40,
  },
  crownContainer: {
    marginBottom: 10,
  },
  crown: {
    fontSize: 30,
  },
  podiumAvatar: {
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: '#f0f0f0',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
  },
  podiumAvatarText: {
    fontSize: 30,
  },
  podiumRank: {
    width: 30,
    height: 30,
    borderRadius: 15,
    backgroundColor: '#FFD700',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
  },
  podiumRankNumber: {
    color: '#fff',
    fontWeight: 'bold',
    fontSize: 16,
  },
  podiumName: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 5,
  },
  podiumXP: {
    fontSize: 14,
    color: '#666',
  },
  leaderboardContainer: {
    flex: 1,
    marginTop: 20,
    paddingHorizontal: 20,
  },
  sectionTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 15,
  },
  leaderboardItem: {
    backgroundColor: '#fff',
    borderRadius: 15,
    padding: 15,
    marginBottom: 10,
    flexDirection: 'row',
    alignItems: 'center',
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 2,
  },
  currentUserItem: {
    borderColor: '#58CC02',
    borderWidth: 2,
    backgroundColor: '#E8F5E8',
  },
  podiumItem: {
    backgroundColor: '#FFF8DC',
  },
  rankContainer: {
    width: 30,
    height: 30,
    borderRadius: 15,
    backgroundColor: '#e0e0e0',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 15,
  },
  rankText: {
    fontSize: 14,
    fontWeight: 'bold',
    color: '#666',
  },
  podiumRankText: {
    color: '#fff',
  },
  avatarContainer: {
    alignItems: 'center',
    marginRight: 15,
  },
  avatar: {
    fontSize: 24,
    marginBottom: 2,
  },
  flag: {
    fontSize: 16,
  },
  nameContainer: {
    flex: 1,
  },
  name: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 2,
  },
  currentUserName: {
    color: '#58CC02',
  },
  xpText: {
    fontSize: 14,
    color: '#666',
  },
  trophyContainer: {
    marginLeft: 10,
  },
  bottomInfo: {
    alignItems: 'center',
    paddingVertical: 30,
  },
  infoText: {
    fontSize: 16,
    color: '#58CC02',
    fontWeight: '500',
    marginBottom: 5,
  },
  infoSubtext: {
    fontSize: 14,
    color: '#666',
    fontStyle: 'italic',
  },
  bottomPadding: {
    height: 20,
  },
});